import React from 'react'
import style from './style.css'
import style_parent from '../talkItemList/style.css'
import {createIOuuid} from "../../../util/socket";

class TalkItem extends React.Component {
    constructor(props) {
        super(props);
        this.state = {visible: props.visible,};
    };


    componentWillReceiveProps(nextProps) {
    }


    onClose() {
        this.props.onClose()
    }

    render() {
        var isMe = this.props.isMe
        var user = isMe ? this.props.me : this.props.you
        return <section className={`${style_parent.TalkItem} ${style.TalkItem}
         ${this.props.isMe ? style.me : 'you'}`}>
            <div className={style.user}>
                <img src={user.avatar_url} alt=""/>
            </div>
            <div className={style.messageWrapper}>
                <div className={style.message}>
                    <pre dangerouslySetInnerHTML={{__html: this.props.message.content}}/>
                </div>

            </div>

        </section>
    }
}

TalkItem.defaultProps = {
    me: {
        avatar_url: "https://unsplash.it/500/300?image=672",
        city: "9i0mqk5vn1f",
        distance: 19,
        gender: 1,
        id: 3.9098984851335503,
        index: 0,
        latitude: 3.3956484378633744,
        longitude: 4.686956229330022,
        mobile: "sn0sskvwtn",
        name: "1h02z5qqnao",
    },
    you: {
        avatar_url: "https://unsplash.it/500/300?image=672",
        city: "9i0mqk5vn1f",
        distance: 19,
        gender: 1,
        id: 3.9098984851335503,
        index: 0,
        latitude: 3.3956484378633744,
        longitude: 4.686956229330022,
        mobile: "sn0sskvwtn",
        name: "1h02z5qqnao"
    },
    create_time: "68dpoou4ss2",
    id: 21,
    me_id: 1,
    message: {content: "", id: 4.308690633220951, type_id: 1, type: {id: 1, name: "this is a msg"}},
    message_id: 1.1709488123098923,
    unit_id: "18_3",
    update_time: "su55pccdzg",
    you_id: 1,
    isMe: false
}
export default TalkItem